<template>
  <div
    class="barrageList"
    ref="barrageList"
    v-if="barrageListShow"
    :style="barrageStyle"
    @mouseenter="enter()"
    @mouseleave="leave()"
  >
    {{ username }}: {{ content }}
  </div>
</template>

<script>
import { GetTime } from "@/assets/js/GetTime.js";
import Bus from "@/assets/js/bus.js";

export default {
  name: "barrageList",
  data() {
    return {
      barrageListShow: true,
      translateX: 0,
      timers: 0,
      context: this,
      top: 0,
      timer: null,
    };
  },
  props: {
    //弹幕滑行速度
    speed: {
      type: Number,
      default: 10000,
    },
    //弹幕唯一标识符
    barragekey: {
      type: Number,
      required: true,
    },
    //弹幕的用户名
    username: {
      type: String,
      required: true,
    },
    //弹幕的内容
    content: {
      type: String,
      required: true,
    },
    //弹幕的字体颜色，默认为白色
    color: {
      type: String,
      default: "rgba(255,255,255)",
    },
    //弹幕的字体大小，有small,normal,large三个选项
    size: {
      type: String,
      default: "normal",
      validator: (value) => {
        try {
          if (
            value.indexOf("normal") != -1 ||
            value.indexOf("small") != -1 ||
            value.indexOf("large") != -1
          ) {
            return value;
          } else {
            throw "Font size must be small, normal or large";
          }
        } catch (error) {
          console.log(error);
        }
      },
    },
    //弹幕的发送时间
    time: {
      type: String,
      required: true,
      validator: (value) => {
        let values = new Date(value).getTime();
        let time = new Date(GetTime()).getTime();
        try {
          if (values > time) {
            throw "The sending time of the barrage cannot be greater than the current time";
          } else {
            return value;
          }
        } catch (error) {
          console.log(error);
        }
      },
    },
    clientWidth: {
      type: Number,
      default: 840,
    },
    isLast: {
      type: Boolean,
      default: false,
    },
  },
  created() {},
  mounted() {
    this.top = this.getTop();
    this.animation();
  },
  methods: {
    animation() {
      let context = this;
      function getWidth(context) {
        //获取父级元素的宽度，即弹幕容器的宽度
        return context.clientWidth;
      }
      function speed(context) {
        //计算出每毫秒应该运行的速度
        return (getWidth(context) / context.speed) * 10;
      }
      function limit(context) {
        //计算出弹幕应该消失的时间,超出容器+自身宽度的时候就消失
        return context.clientWidth / speed(context);
      }
      let speeds = speed(context);
      let limits = limit(context);
      //定义一个每10毫秒运行的定时器
      this.timer = setInterval(() => {
        this.translateX -= speeds;
        this.timers += 10;
        if (
          this.timers >= this.speed + limits ||
          document.getElementById("barrage") == undefined
        ) {
          new Promise((resolve, reject) => {
            clearInterval(this.timer);
            this.barrageListShow = false;
            resolve();
          }).then(() => {
            Bus.$emit("barrageClose");
          });
        }
      }, 10);
    },
    getTop() {
      return Math.floor(Math.random() * 90 + 5);
    },
    enter() {
      clearInterval(this.timer);
    },
    leave() {
      this.animation();
    },
  },
  computed: {
    //返回弹幕的字体大小
    getSize() {
      return (size) => {
        const sizearr = new Map([
          ["small", 0.8],
          ["normal", 1],
          ["large", 1.2],
        ]);

        return sizearr.get(size);
      };

      // function realSize(fontSize) {
      //   return sizearr.get(fontSize);
      // }
      // return realSize(this.size);
    },
    barrageStyle() {
      return {
        color: `${this.color}`,
        fontSize: `${this.getSize(this.size)}rem`,
        transform: `translateX(${this.translateX}px)`,
        top: `${this.top}%`,
      };
    },
  },
  watch: {},
};
</script>

<style scoped>
.barrageList {
  font-size: 1rem;
  line-height: 1.2rem;
  font-weight: bold;
  position: absolute;
  z-index: 1;
  width: auto;
  right: -200px;
  cursor: pointer;
}
</style>